<!--首页-->
<template>
  <div class="index-content">
    <!--广告轮播图-->
    <div class="HomeBan" style="overflow: hidden;">
      <!--轮播图-->
      <div class="Carousel" style="width: 120%;transform: translateX(-190px);">
        <el-carousel type="card" indicator-position="none" height="370px">
          <el-carousel-item key="1" style="width: 980px">
            <img src="../assets/uploadfiles/image/banner/HomeBan.jpg" alt="HomeBan">
          </el-carousel-item>
          <el-carousel-item key="2" style="width: 980px">
            <img src="../assets/uploadfiles/image/banner/HomeBan1.jpg" alt="HomeBan">
          </el-carousel-item>
          <el-carousel-item key="3" style="width: 980px">
            <img src="../assets/uploadfiles/image/banner/HomeBan2.jpg" alt="HomeBan">
          </el-carousel-item>
        </el-carousel>
      </div>
      <!--精品童装-->
      <div class="Adver">
        <a href="#">
          <img src="../assets/uploadfiles/image/temp/tongzhuang.jpg" alt="童装">
        </a>
      </div>
    </div>
    <!--中间的内容-->
    <div class="contain">
      <!--活动及品牌新闻-->
      <div>
        <!--标题-->
        <div class="title">
          <div>WHAT`S NEW<em>活动及品牌新闻</em></div>
        </div>
        <br>
        <!--童装列表-->
        <div class="content-list">
          <div class="xinwen2_1" v-for="(event, index) in this.events" :key="index">
            <div class="xinimg" @click="toEventDetail(event.eventId)">
              <a href="#">
                <img :src="event.eventPic" width="200" height="260"/>
              </a>
            </div>
            <div class="xintitle" @click="toEventDetail(event.eventId)"><a href="#">{{ event.eventTitle }}</a></div>
            <div class="xintime">{{ event.modifyTime | formatDate }}</div>
            <div class="xindes" v-html="event.eventContent"></div>
          </div>
        </div>
      </div>
      <!--      <hr>-->
      <!--热销商品-->
      <div>
        <!--标题-->
        <div class="title">
          <div>PICK UP ITEM <em>热销商品</em></div>
        </div>
        <br>
        <!--童装列表-->
        <div class="content-list infinite-list">
          <!--          无限滚动-->
          <div class="xinwen2_1 product_list infinite-list-item" v-for="(product, index) in productList" :key="index">

            <div class="xinimg" @click="toProductDetail(product.productId)">
              <a href="#">
                <img style="cursor: pointer" :src="product.picUrl" width="200" height="260"/>
              </a>
            </div>
            <div class="spdes">
              <div class="spdes1" @click="toProductDetail(product.productId)">
                <div v-text="product.productName"
                     style="width: 94%;cursor: pointer;white-space: nowrap;overflow:hidden;text-overflow: ellipsis"></div>
              </div>
              <div class="spnum">
                <div class="price" v-text="'￥'+ product.price"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getEvents, getHots, getUser } from '../api/index'
import { formatTimeToStr } from '@/utils/data'
import router from '../router/index'
export default {
  name: 'Index',
  data () {
    return {
      events: [
        {
          deleted: 1,
          eventContent: '',
          eventId: 1,
          eventPic: '',
          eventTitle: '',
          eventType: 1,
          modifyTime: '',
          productId: 65
        }
      ],
      productList: [
        //   {
        //   brandId: 1,
        //   descript: '',
        //   isMaster: 1,
        //   picDesc: '',
        //   picOrder: 1,
        //   picStatus: 1,
        //   picUrl: '',
        //   price: 99.9,
        //   productId: 1,
        //   productName: '',
        //   saleCount: 100,
        //   supplierId: 1
        // }
      ],
      page: 1,
      limit: 10,
      loading: false
    }
  },
  filters: {
    formatDate: function (time) {
      if (time != null && time !== '') {
        const date = new Date(time)
        return formatTimeToStr(date, 'yyyy-MM-dd')
      } else {
        return ''
      }
    }
  },
  created () {
    this.isRoll = true
    this.getUser()
    this.getEventList()
    this.getHotProduct()
  },
  mounted () {
    // 添加滚动条滚动的监听事件
    window.addEventListener('scroll', this.scroll, false)
  },
  beforeDestroy () {
    // 删除滚动条滚动的监听事件
    window.removeEventListener('scroll', this.scroll, false)
  },
  methods: {
    getEventList () {
      getEvents().then(({ data }) => {
        if (data.code === 0) {
          this.events = data.data
        } else {
          this.$message.error(data.msg)
        }
      }).catch(res => {
        console.log(res)
      })
    },
    toEventDetail (eventId) {
      this.$router.push({ path: '/eventAndNews/eventAndNewsDetail/' + eventId })
    },
    // 获取热销商品
    getHotProduct () {
      // 当前是否正在加载，如果是正在加载就取消加载数据
      if (this.loading) {
        this.page--
        return
      }
      if (this.productList.length >= this.totalCount) return
      // 赋值表示正在加载
      this.loading = true
      getHots({
        limit: this.limit,
        page: this.page
      }).then(({ data }) => {
        if (data.code === 0) {
          this.totalCount = data.page.totalCount
          this.totalPage = data.page.totalPage
          this.productList = this.productList.concat(data.page.list)
        }
        // 表示加载完成
        this.loading = false
      }).catch((res) => {
        console.log(res)
      })
    },
    toProductDetail (productId) {
      this.$router.push({ path: `/hot/detail/${productId}` })
    },
    scroll () {
      window.onscroll = () => {
        // 整个页面的高度
        const scrollHeight = document.body.scrollHeight
        // 当前可视区的顶部到页面顶部的高度
        const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
        // 当前可视区的高度
        const clientHeight = document.documentElement.clientHeight
        // 可视区底部到页面底部的高度，即滚动条与底部的距离
        const instance = scrollHeight - scrollTop - clientHeight
        // 当滚动条与底部的距离小于100时就触发加载数据
        if (instance < 100) {
          this.page++
          this.getHotProduct()
        }
      }
    },
    getUser () {
      // 获取到用户信息（是否登录了）
      getUser().then(({ data }) => {
        this.$store.state.user = data.data
        sessionStorage.setItem('store', JSON.stringify(this.$store.state))
      }).catch((res) => {
        console.log(res)
      })
    }
  }
}
</script>

<style scoped lang="less">
.index-content {
  // 轮播图，广告
  .HomeBan {
    // 轮播图
    .Carousel {
      width: 100%;
      margin: 0 auto;

      .el-carousel__container {
        .el-carousel__item {
          display: block !important;
        }
      }
    }

    // Adver
    .Adver {
      width: 100%;
      height: 146px;
    }
  }

  // 中间的内容的样式
  .contain {
    width: 980px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 10px;

    .title {
      width: 980px;
      text-align: left;
      box-sizing: border-box;
      float: left;
      margin: 10px 0 10px 0;

      div {
        font-size: 22px;
        color: #83B8D3;

        em {
          font-size: 15px;
          color: #186289;
          padding-left: 10px;
        }
      }

    }

    // 童装列表样式
    .content-list {
      width: 980px;

      .xinwen2_1 {
        width: 225px;
        height: 418px;
        border: 1px solid #e7e7e7;
        box-sizing: border-box;
        float: left;
        padding: 10px;
        margin-right: 10px;
        font-size: 12px;
        background: #fff;
        margin-bottom: 18px;
        color: #444444;
        text-align: left;

        .xintitle {
          margin-top: 10px;
          margin-bottom: 10px;
          text-align: left;
          padding-bottom: 10px;
          border-bottom: 1px dotted #b2b2b2;

          a {
            color: #444444;
            text-decoration: none;
            font-size: 11px;
            font-weight: bold;
          }

          a:hover {
            color: red;
          }
        }

        .xintime {
          font-size: 12px;
          font-weight: bold;
          padding-bottom: 8px;
        }

        .xindes {
          height: 61px;
          width: 100%;
          overflow: hidden;
        }

        .spdes {
          //display: flex;
          //justify-content: left;
          margin-top: 10px;

          .spdes1 {
            div {
              text-decoration: none;
              color: #666666;
              margin-left: 8px;
              margin-top: 2px;
              display: inline-block;
              font-size: 14px;
            }
          }

          .spnum {
            margin-top: 10px;

            .price {
              font-size: 17px;
            }
          }
        }
      }

      .product_list {
        height: 369px;
      }
    }
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
}
</style>
